<template>
    <div class="replace-work-container">
        <div class="form-header">
            <h2>添加替班申请</h2>
        </div>

        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" class="replace-work-form">
            <el-form-item label="申请人：" prop="nurseCode">
                <el-select v-model="form.nurseCode" placeholder="请选择申请人" clearable>
                    <el-option v-for="item in nurseOptions" :key="item.nurseCode" :label="item.name"
                        :value="item.nurseCode" />
                </el-select>
            </el-form-item>

            <el-form-item label="替班人：" prop="replaceCode">
                <el-select v-model="form.replaceCode" placeholder="请选择替班人" clearable>
                    <el-option v-for="item in replace" :key="item.replaceCode" :label="item.replaceName"
                        :value="item.replaceCode" />
                </el-select>
            </el-form-item>

            <el-form-item label="申请类型：" prop="applicantType">
                <el-select v-model="form.applicantType" placeholder="请选择申请类型" clearable>
                    <el-option label="休假" value="休假" />
                    <el-option label="调休" value="调休" />
                    <el-option label="事假" value="事假" />
                    <el-option label="病假" value="病假" />
                </el-select>
            </el-form-item>

            <el-form-item label="申请原因：" prop="reason">
                <el-input v-model="form.reason" type="textarea" :rows="4" placeholder="请输入申请原因" maxlength="200"
                    show-word-limit />
            </el-form-item>

            <el-form-item label="审核人" prop="auditorCode">
                <el-input v-model="form.auditorCode" show-word-limit />
            </el-form-item>

            <el-form-item label="替班日期：" required>
                <div class="date-picker-group">
                    <el-form-item prop="startTime" class="date-item">
                        <el-date-picker v-model="form.startTime" type="date" placeholder="开始日期" format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD" :disabled-date="disablePastDates" @change="validateDates" />
                    </el-form-item>
                    <span class="date-separator">至</span>
                    <el-form-item prop="endTime" class="date-item">
                        <el-date-picker v-model="form.endTime" type="date" placeholder="结束日期" format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD" :disabled-date="disablePastDates" @change="validateDates" />
                    </el-form-item>
                </div>
            </el-form-item>

            <el-form-item>
                <div class="form-buttons">
                    <el-button type="primary" @click="submitForm(formRef)">提交申请</el-button>
                    <el-button @click="resetForm(formRef)">重置</el-button>
                    <el-button @click="cancel">取消</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import http from '@/api/http.js'
// ReplaceWorkShow

const router = useRouter()
const route = useRoute()
const formRef = ref<FormInstance>()
const nurseOptions: any = ref([])
const replace: any = ref([]);
// 表单数据
const form = reactive({
    nurseCode: '',
    replaceCode: '',
    applicantType: '',
    reason: '',
    startTime: '',
    endTime: '',
    auditState: '0', // 默认待审核
    auditorCode: '',
    isDel: '0' // 默认未删除
})

// 表单验证规则
const rules = reactive<FormRules>({
    nurseCode: [
        { required: true, message: '请选择申请人', trigger: 'change' }
    ],
    replaceCode: [
        { required: true, message: '请选择替班人', trigger: 'change' },

    ],
    applicantType: [
        { required: true, message: '请选择申请类型', trigger: 'change' }
    ],
    reason: [
        { required: true, message: '请输入申请原因', trigger: 'blur' },

    ],
    auditorCode: [
        { required: true, message: '请输入审核人', trigger: 'blur' },

    ],
    startTime: [
        { required: true, message: '请选择开始日期', trigger: 'change' }
    ],
    endTime: [
        { required: true, message: '请选择结束日期', trigger: 'change' }
    ]
})

// 禁用过去的日期
const disablePastDates = (date: Date) => {
    return date.getTime() < Date.now() - 8.64e7
}

// 验证日期
const validateDates = () => {
    if (form.startTime && form.endTime) {
        const start = new Date(form.startTime).getTime()
        const end = new Date(form.endTime).getTime()
        if (end < start) {
            form.endTime = ''
            ElMessage.warning('结束日期不能早于开始日期')
        }
    }
}

onMounted(() => {
    getNurseList();
    replaceCodeOptions();
})
// 获取护士列表
const getNurseList = async () => {
    http.get('/api/ReplaceWorkController/ReplaceWorkShow').then(res => {
        nurseOptions.value = res
    })

}

// 获取替班人列表
const replaceCodeOptions = async () => {
    http.get('/api/ReplaceWorkController/ReplaceTableShow').then(res => {
        console.log(res);
        replace.value = res
    })

}

// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            http.post('/api/ReplaceWorkController/AddReplaceWork', form).then(res => {
                ElMessage.success('申请成功')
                router.push('/ReplaceWorkShow')
                return;
            })
        } else {
            console.log('error submit!', fields)
            ElMessage.error('请检查输入内容')
        }
    })
}
// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

// 取消
const cancel = () => {
    ElMessageBox.confirm(
        '确认取消申请？未保存的内容将丢失',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        router.back()
    })
}


</script>

<style scoped>
.replace-work-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.form-header {
    margin-bottom: 30px;
    text-align: center;
}

.form-header h2 {
    color: #303133;
    font-weight: 500;
    margin: 0;
}

.replace-work-form {
    max-width: 800px;
    margin: 0 auto;
}

.date-picker-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-item {
    margin-bottom: 0;
}

.date-separator {
    color: #606266;
}

.form-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

:deep(.el-form-item__label) {
    font-weight: 500;
}

:deep(.el-select) {
    width: 100%;
}

:deep(.el-date-picker) {
    width: 100%;
}

@media (max-width: 768px) {
    .replace-work-container {
        padding: 15px;
    }

    .date-picker-group {
        flex-direction: column;
        align-items: stretch;
    }

    .date-separator {
        text-align: center;
        margin: 5px 0;
    }

    .form-buttons {
        flex-direction: column;
        gap: 10px;
    }
}
</style>
